<template>
    <div class="app-container">
        <div class="layout-content">
            <div class="layout-header">
                <loading :loadingFlag="loadingFlag" :text="'图片上传中...'" />

                <h5>设备点检</h5>
                <van-row>
                    <van-col span="21">
                        <van-search v-model="searchText" placeholder="请输入搜索关键词" @search="onSearch" /></van-col>
                    <van-col span="3"><van-icon name="scan" @click="getscan" /></van-col>
                </van-row>
            </div>
            <div class="layout-main" v-if="DeviceData.deviceName">
                <van-cell title="设备编号" :value="DeviceData.deviceCode" />
                <van-cell title="设备名称" :value="DeviceData.deviceName" />
                <van-cell title="设备型号" :value="DeviceData.typeCode" />
                <van-cell title="负责人" :value="DeviceData.pointcheckDutyPerson_dictText" />
                <van-cell title="所属科室" :value="DeviceData.sysOrgCode_dictText" />
                <van-cell title="点检周期" :value="DeviceData.pointcheckPeriod
                    ? `${DeviceData.pointcheckPeriod}天`
                    : '/'
                    " />
                <van-cell title="点检日期" :value="currentTime" />
                <!-- -->
                <van-field v-if="!checdisabled()" input-align="right" label-width="160" name="switch" label="当前设备是否为不使用">
                    <template #input>
                        <van-switch @change="notUseChange" v-model="notUse" />
                    </template>
                </van-field>

                <div class="device_class" v-for="(item, index) in DeviceList" :key="index">
                    <h5>
                        {{ item.pointcheckContent }}
                        <span v-if="item.files" style="" type="primary" @click="getPhoto(item, 'files')">查看标准照片</span>
                    </h5>
                    <p>
                        <span>点检标准：{{ item.pointcheckStandard }}</span>
                    </p>
                    <van-radio-group :disabled="checdisabled() || notUse" v-if="item.devicePointcheckCheckList &&
                        (item.devicePointcheckCheckList.pointcheckState != 'over_time' ||
                            item.devicePointcheckCheckList.auditState)
                        " direction="horizontal" @change="(val) => {
        isNormalChange(val, item);
    }
        " v-model="item.devicePointcheckCheckList.isNormal">
                        <van-radio name="1">正常</van-radio>
                        <van-radio name="0">异常</van-radio>
                        <!-- <van-radio name="2">不使用</van-radio> -->
                    </van-radio-group>
                    <p style="color: red" v-else>已过期</p>
                    <div class="defect_class">
                        <!-- v-if="item.devicePointcheckCheckList.isNormal == '0'"
            v-if="item.devicePointcheckCheckList.isNormal == '0'" -->
                        <van-form :ref="`abform${index}`" required="auto">
                            <van-field name="defectRecord" :disabled="checdisabled() || notUse"
                                v-model="item.devicePointcheckCheckList.defectRecord" rows="1" type="textarea" :rules="[
                                    item.devicePointcheckCheckList.isNormal == '0'
                                        ? { required: true, message: '请输入异常描述' }
                                        : { required: false, message: '请输入描述' },
                                ]" :label="item.devicePointcheckCheckList.isNormal == '0'
    ? '异常描述：'
    : '描述：'
    " :placeholder="item.devicePointcheckCheckList.isNormal == '0'
        ? '请输入异常描述'
        : '描述：'
        " />
                        </van-form>
                    </div>

                    <template v-if="(item.devicePointcheckCheckList.pointcheckState != 'over_time' ||
                        item.devicePointcheckCheckList.auditState) &&
                        !notUse
                        ">
                        <!-- item.devicePointcheckCheckList.isCheck == '1' -->
                        <van-uploader :disabled="checdisabled()" :before-read="individualbeforeRead" capture="camera"
                            :after-read="(file) => {
                                recordApprovaAfterRead(file, item);
                            }
                                ">
                            <van-button type="primary">上传照片</van-button>
                        </van-uploader>
                        <van-button style="margin-left: 5px" v-if="item.devicePointcheckCheckList.defectAttachment"
                            type="primary" @click="
                                getPhoto(item.devicePointcheckCheckList, 'defectAttachment')
                                ">预览照片</van-button>
                    </template>
                </div>

                <van-dialog v-model="photoShow" title="预览照片">
                    <van-swipe @change="swiperChange" class="photo-swiper">
                        <van-swipe-item v-for="(item, index) in previewImg" :key="index">
                            <div class="photo-close" @click="imgDel('defectAttachment')" v-if="delflag">
                                <van-icon name="cross" />
                            </div>
                            <!-- <img :src="" alt="" /> -->
                            <div class="imgclass">
                                <van-image :src="item.storageName" />
                            </div>
                        </van-swipe-item>

                        <template #indicator>
                            <div class="custom-indicator">
                                {{ current + 1 }}/{{ previewImg.length }}
                            </div>
                        </template>
                    </van-swipe>
                </van-dialog>
                <van-row style="padding: 30px 0 90px">
                    <van-col span="12" style="text-align: center">
                        <van-button v-if="!checdisabled()" @click="cancel">取消</van-button>
                    </van-col>
                    <van-col span="12" style="text-align: center" v-if="!submitFlag">
                        <van-button :loading="loadingSubmit" v-if="!checdisabled()" @click="submit"
                            type="info">确定</van-button>
                    </van-col>
                    <van-col span="12" style="text-align: center" v-else>
                        <van-button :loading="loadingAuditing" v-if="!checdisabled()" @click="applySubmit"
                            type="info">提交审核</van-button>
                    </van-col>
                </van-row>
            </div>
        </div>
        <!-- <div class="layout-footer">
            <TabBar :activeTab="2"></TabBar>
        </div> -->
        <Scan @getcode="getcode" ref="scan"></Scan>
    </div>
</template>

<script>
import { Notify } from "vant";
import loading from "../components/loading.vue";
import dayjs from "dayjs";
import { axios } from "@/utils/request";
import TabBar from "@/components/TabBar";
import Scan from "../components/Scan.vue";
import { getAction, postAction } from "@/api/manage";
export default {
    data () {
        return {
            searchText: "",
            currentModelId: "",
            notUse: false,
            loadingAuditing: false,
            loadingSubmit: false,
            submitFlag: false,
            deviceDaySourceAll: [],
            params: {
                assignees: "",
                procDeTitle: "",
                procDefId: "",
                processKey: "lims_device_pointcheck_check_abnormal",
                tableName: "",
            },
            inspectionSupervisor: "",
            pointcheckDutyPerson: "",
            delflag: false,
            previewImg: [],
            currentDate: {},
            photoShow: false,
            loadingFlag: false,
            current: 0,
            DeviceData: {},
            DeviceList: [],
            currentTime: dayjs().format("YYYY-MM-DD"),
            url: {
                detail: "activitiProcess/queryProcessByKey",
                apply: "actBusiness/apply",
                queryByDeviceCode: "lims/limsDevice/queryByDeviceCode",
                queryById: "lims/limsDevicePointcheckCheck/queryById",
                queryList: "sys/attachment/queryList",
                add: "lims/limsDevicePointcheckCheck/add",
                personllist: "lims/limsDevice/queryPointCheckApprovalPerson",
                ProcessNodeList: "actProcessIns/queryProcessNodeList",
                detailAll: "/lims/limsDevicePointcheckCheck/queryById",
            },
            uploadUrl: "sys/attachment/upload",
        };
    },
    components: {
        TabBar,
        Scan,
        loading,
    },
    created () {
        this.getDetail();
        // this.onSearch();
    },
    computed: {
        checdisabled () {
            return (val) => {
                // console.log(val);
                // this.DeviceList[0].devicePointcheckCheckList.auditState != "draft"&&
                if (this.DeviceList[0].devicePointcheckCheckList.isCheck == "1") {
                    return true;
                } else if (
                    !["draft", null].some(
                        (item) =>
                            item == this.DeviceList[0].devicePointcheckCheckList.auditState
                    )
                ) {
                    return true;
                }
                return false;
            };
        },
    },
    methods: {
        flagDeviceDaySourceAll (index, item) {
            //允许提交为false 不允许提交为true
            if (this.deviceDaySourceAll) {
                console.log(item);
                // 查找当前点击的下标
                let currentindex = this.deviceDaySourceAll[
                    index
                ].devicePointcheckCheckList.findIndex((fitem) => {
                    return fitem.shouldCheckDate == item;
                });
                console.log(currentindex);
                // 进行截取
                let source = null;
                if (currentindex == -1) {
                    source = JSON.parse(
                        JSON.stringify(
                            this.deviceDaySourceAll[index].devicePointcheckCheckList
                        )
                    ).reverse();
                } else {
                    source = JSON.parse(
                        JSON.stringify(
                            this.deviceDaySourceAll[index].devicePointcheckCheckList
                        )
                    )
                        .slice(0, currentindex)
                        .reverse();
                }

                console.log(source);
                //条件判断 isHoliday==1 假期 pointcheckState==over_time 过期 因为异常需要考核所以overtime不满足需要在加上审批状态来判定
                //筛选符合条件的数据
                const accordData = source.find(
                    (item) =>
                        item.isHoliday != 1 &&
                        (item.pointcheckState !== "over_time" ||
                            item.auditState_dictText == "审批中")
                );
                console.log(accordData);
                // if(){}

                if (accordData) {
                    return accordData.isNormal == 0;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        },
        getdeviceDaySourceAll (params) {
            params.pointcheckMonth = dayjs(this.currentTime)
                .subtract(1, "month")
                .format("YYYY-MM");
            params.preview = 1;
            getAction(this.url.detailAll, params).then((res) => {
                console.log(res);
                if (res.result && res.result.limsDevicePointcheckSettingList) {
                    this.deviceDaySourceAll = JSON.parse(
                        JSON.stringify(res.result.limsDevicePointcheckSettingList)
                    );
                    console.log(this.deviceDaySourceAll);
                    params.pointcheckMonth = dayjs(this.currentTime).format("YYYY-MM");
                    getAction(this.url.detailAll, params).then((res) => {
                        if (res.result && res.result.limsDevicePointcheckSettingList) {
                            console.log(res.result.limsDevicePointcheckSettingList);
                            this.deviceDaySourceAll = this.deviceDaySourceAll.map(
                                (item, index) => {
                                    item.devicePointcheckCheckList = [
                                        ...item.devicePointcheckCheckList,
                                        ...res.result.limsDevicePointcheckSettingList[index]
                                            .devicePointcheckCheckList,
                                    ];
                                    return item;
                                }
                            );
                        }
                    });
                }
            });
        },
        notUseChange (val) {
            this.DeviceList = this.DeviceList.map((item) => {
                if (val) {
                    item.devicePointcheckCheckList.defectRecord = "该设备未使用。";
                    item.devicePointcheckCheckList.isNormal = "1";
                } else {
                    item.devicePointcheckCheckList.defectRecord = "";
                }
                return item;
            });
        },
        async formV (form) {
            try {
                await form[0].validate();
                return false; // Validation passed
            } catch (error) {
                return true; // Validation failed
            }
        },
        async valiForm () {
            let modelflag = false;
            console.log(this.DeviceList, "DeviceList1");
            for (let i = 0; i < this.DeviceList.length; i++) {
                if (
                    this.$refs[`abform${i}`] &&
                    this.DeviceList[i].devicePointcheckCheckList.isNormal == 0
                ) {
                    console.log(this.$refs[`abform${i}`]);
                    let flag = await this.formV(this.$refs[`abform${i}`]);

                    if (flag) {
                        modelflag = flag;
                        // Stop further validation once a failure is encountered
                    }
                }
            }

            return modelflag;
        },
        // formV(form) {
        //   return new Promise((resolve, reject) => {
        //     form[0]
        //       .validate("defectRecord")
        //       .then(async (valid) => {
        //         resolve(false);
        //       })
        //       .catch(() => {
        //         resolve(true);
        //       });
        //   });
        // },
        // //验证表单
        // valiForm() {
        //   return new Promise(async (resolve, reject) => {
        //     let modelflag = false;
        //     for (var i = 0; i < this.DeviceList.length; i++) {
        //       if (this.$refs[`abform${i}`]) {
        //         let flag = await this.formV(this.$refs[`abform${i}`]);

        //         if (flag) {
        //           modelflag = flag;
        //           // return;
        //         }
        //       }
        //     }
        //     resolve(modelflag);
        //   });

        // this.$refs.abform.validate((valid) => {
        // 	if (valid) {
        // 		this.submitFlag = true;
        // 	}
        // });
        // },
        //提交流程
        async applySubmit () {
            let flag = true;

            // let abnormalFlag = true;
            console.log(this.DeviceList);
            let formFlag = await this.valiForm();
            if (formFlag) {
                Notify({ type: "warning", message: "请输入异常描述" });
                return;
            }
            console.log(formFlag);

            //判断上传照片
            this.DeviceList.forEach((item) => {
                if (!item.devicePointcheckCheckList.defectAttachment) {
                    flag = false;
                }
            });
            // if (!flag) {
            //   Notify({ type: "warning", message: "请上传照片" });
            //   return;
            // }
            let params = JSON.parse(JSON.stringify(this.DeviceData));
            params.methodName = "checkCreate";
            params.id =
                params.limsDevicePointcheckSettingList[0].devicePointcheckCheckList.id;
            params.limsDevicePointcheckSettingList =
                params.limsDevicePointcheckSettingList.map((item) => {
                    console.log(item);
                    if (
                        !item.devicePointcheckCheckList.length &&
                        !Array.isArray(item.devicePointcheckCheckList)
                    ) {
                        // if (item.devicePointcheckCheckList.length) {
                        item.devicePointcheckCheckList = [item.devicePointcheckCheckList];
                        // } else {
                        //   item.devicePointcheckCheckList = [];
                        // }
                        // item.devicePointcheckCheckList = [item.devicePointcheckCheckList];
                        // item.devicePointcheckCheckList = [];
                    } else {
                        // item.devicePointcheckCheckList = [];
                        item.devicePointcheckCheckList =
                            item.devicePointcheckCheckList.slice(-1);
                    }
                    return item;
                });
            this.params.formData = params;
            console.log(this.params.formData);
            console.log(this.params);
            this.loadingAuditing = true
            postAction(this.url.apply, this.params).then((res) => {
                if (res.success) {
                    Notify({ type: "success", message: res.message });
                    setTimeout(() => {
                        this.loadingAuditing = false
                        window.location.reload();
                    }, 300);
                } else {
                    this.loadingAuditing = false
                    Notify({ type: "warning", message: res.message });
                }
            });
            // this.params.formData.if=this.model
        },
        //获取流程信息
        getDetail () {
            let params = {
                processKey: "lims_device_pointcheck_check_abnormal",
                // tableId: this.$route.query.tableId,
            };
            getAction(this.url.detail, params).then((res) => {
                if (res.success) {
                    this.params.procDeTitle = `【${res.result.name}】`;
                    this.params.procDefId = res.result.id;
                    this.params.tableName = res.result.businessTable;
                    console.log(res);
                }
            });
        },
        //获取流程人员
        getProcessNodeList () {
            return new Promise((resolve, reject) => {
                let params = {
                    processKey: "lims_device_pointcheck_check_abnormal",
                    // tableId: this.$route.query.tableId,
                };
                getAction(this.url.ProcessNodeList, params).then((res) => {
                    if (res.success) {
                        this.params.processNodeList = res.result.slice(
                            1,
                            res.result.length - 1
                        );
                        this.params.assignees = res.result[1].assignees;
                        console.log(res, "res");
                        this.params.processNodeList = this.params.processNodeList.map(
                            (item) => {
                                if (item.nodeTitle == "设备管理员") {
                                    item.assignees = this.inspectionSupervisor;
                                }
                                return item;
                            }
                        );
                        console.log(this.params.processNodeList);
                        resolve(true);

                        console.log(this.inspectionSupervisor);
                        console.log(this.pointcheckDutyPerson);
                    }
                });
            });
        },
        //获取人员
        getpersonllist (id) {
            return new Promise((resolve, reject) => {
                getAction(this.url.personllist, { deviceId: id }).then((res) => {
                    if (res.success) {
                        this.inspectionSupervisor = res.result.inspectionSupervisor;
                        this.pointcheckDutyPerson = res.result.pointcheckDutyPerson;
                        resolve(true);
                    } else {
                        Notify({ type: "warning", message: res.message });
                    }
                    console.log(res);
                });
            });
        },
        //是否正常
        isNormalChange (val, item) {
            console.log(val);
            console.log(item);
            console.log(this.currentTime);
            console.log(this.DeviceList);
            // true提交审核 false确定
            this.submitFlag = false;
            // if (
            //   this.DeviceList.some(
            //     (item) => item.devicePointcheckCheckList.isNormal == "0"
            //   )
            // ) {
            //   this.submitFlag = true; //
            // }
            if (this.notUse) {
                item.devicePointcheckCheckList.defectRecord = "该设备未使用。";
            } else {
                item.devicePointcheckCheckList.defectRecord = "";
            }
            this.submitFlag = this.DeviceList.some((fitem, findex) => {
                if (fitem.devicePointcheckCheckList.isNormal == 0) {
                    return (
                        !this.flagDeviceDaySourceAll(findex, this.currentTime) &&
                        fitem.devicePointcheckCheckList.isNormal == 0
                    );
                }
                console.log(this.flagDeviceDaySourceAll(findex, this.currentTime));
            });
            item.devicePointcheckCheckList.defectAttachment = "";
        },
        //图片删除
        imgDel (val) {
            let fileId = this.currentDate[val].split(",")[this.current];
            this.currentDate[val] = this.currentDate[val]
                .split(",")
                .filter((item) => item != fileId)
                .join(",");
            this.previewImg.splice(this.current, 1);
            if (this.current != 0) {
                this.current--;
            }
            if (this.previewImg.length == 0) {
                this.photoShow = false;
            }
        },
        //轮播图监听
        swiperChange (index) {
            this.current = index;
        },
        //扫码
        getscan () {
            this.$refs.scan.scanCode();
        },
        //扫码回调
        getcode (val) {
            this.searchText = val;
            this.onSearch(val);
        },
        //获取图片
        getPhoto (data, name) {
            console.log(data);
            this.current = 0;
            let file = data[name];
            this.currentDate = data;
            console.log(file);
            getAction(this.url.queryList, {
                ids: file,
            }).then((res) => {
                if (res.success) {
                    // this.previewImg = [];
                    // res.result.forEach((item) => {
                    //   this.previewImg.push(item.storageName);
                    // });
                    if (
                        name == "defectAttachment" &&
                        !this.checdisabled(data?.devicePointcheckCheckList)
                    ) {
                        this.delflag = true;
                    } else {
                        this.delflag = false;
                    }
                    this.previewImg = res.result;
                    this.photoShow = true;
                }

                console.log(res);
            });
        },
        //图片接口调用
        recorUploadImg (file, item) {
            console.log(file, "file1");
            const formData = new FormData();
            formData.append("file", file.file);
            formData.append("biz", "temp");
            axios
                .post(this.uploadUrl, formData, {
                    "content-type": "multipart/form-data",
                })
                .then((res) => {
                    console.log(res);

                    if (res.success) {
                        this.loadingFlag = false;
                        item.devicePointcheckCheckList.defectAttachment = item
                            .devicePointcheckCheckList.defectAttachment
                            ? item.devicePointcheckCheckList.defectAttachment +
                            "," +
                            res.result.id
                            : res.result.id;
                        // item.devicePointcheckCheckList.defectAttachment = res.result.id;
                        // item.devicePointcheckCheckList.defectRecord = "无";
                        // this.userInfo.avatar = res.message;
                        // postAction(this.url.edit, this.userInfo).then((res) => {
                        //   if (res.success) {
                        //     console.log(res);
                        //   }
                        // });
                        // this.loadingFlag = false;
                    } else {
                        this.loadingFlag = false;
                        Notify({
                            type: "warning",
                            message: "上传失败",
                        });
                        file.status = "failed";
                        file.message = "上传失败";
                    }
                })
                .catch((err) => {
                    Notify({
                        type: "warning",
                        message: "上传失败",
                    });
                    file.status = "failed";
                    file.message = "上传失败";
                });
        },
        //图片上传
        recordApprovaAfterRead (file, item) {
            console.log(item, "item1");
            console.log(file, "file2");
            this.loadingFlag = true;
            if (file instanceof Array) {
                file.map((v) => {
                    v.status = "uploading";
                    v.message = "上传中...";
                    this.recorUploadImg(v, item);
                });
            } else {
                file.status = "uploading";
                file.message = "上传中...";
                this.recorUploadImg(file, item);
            }
        },
        //图片上传
        individualbeforeRead (file) {
            if (file.type !== "image/jpeg" && file.type !== "image/png") {
                // Toast("请上传 jpg,png 格式图片");
                return false;
            }
            return true;
        },
        //参数赋值
        getQueryById (val) {
            let params = {
                deviceId: val,
                pointcheckMonth: dayjs().format("YYYY-MM"),
            };
            getAction(this.url.queryById, params).then((res) => {
                console.log(res.result);
                this.submitFlag = false;
                if (res.success) {
                    this.currentModelId = res.result.id;
                    this.params.procDeTitle += res.result.deviceName
                        ? res.result.deviceName
                        : "";
                    this.DeviceData = res.result;
                    this.DeviceList = res.result.limsDevicePointcheckSettingList.slice(
                        0,
                        -1
                    );
                    this.DeviceList.map((item) => {
                        //日期取最后一个

                        item.devicePointcheckCheckList =
                            item.devicePointcheckCheckList[
                            item.devicePointcheckCheckList.length - 1
                            ];
                        if (item.devicePointcheckCheckList.isNormal == "0") {
                            this.submitFlag = true;
                        }
                        return item;
                    });
                } else {
                    Notify({ type: "warning", message: res.message });
                }
            });
        },
        cancel () {
            setTimeout(() => {
                window.location.reload();
            }, 300);
        },
        submit () {
            this.loadingSubmit = true
            console.log(this.DeviceData, "DeviceData");
            console.log(this.DeviceList, "DeviceList");
            // if()

            let flag = true;
            //判断上传照片
            // this.DeviceList.forEach((item) => {
            //   if (!item.devicePointcheckCheckList.defectAttachment) {
            //     flag = false;
            //   }
            //   // item.devicePointcheckCheckList.forEach((ite) => {
            //   //   if (ite.isNormal && !ite.devicePointcheckCheckList.defectAttachment) {
            //   //     flag = false;
            //   //   }
            //   // });
            //   // console.log(item);
            // });
            if (!flag) {
                Notify({ type: "warning", message: "请上传照片" });
                this.loadingSubmit = false
                return;
            }
            //ischeck改成1
            // this.DeviceList = this.DeviceList.map((item) => {
            //   item.devicePointcheckCheckList.isCheck = "1";
            //   return item;
            // });
            let params = JSON.parse(JSON.stringify(this.DeviceData));
            params.limsDevicePointcheckSettingList =
                params.limsDevicePointcheckSettingList.map((item) => {
                    console.log(item);

                    if (
                        !item.devicePointcheckCheckList.length &&
                        !Array.isArray(item.devicePointcheckCheckList)
                    ) {
                        // if (item.devicePointcheckCheckList.length) {

                        item.devicePointcheckCheckList = [item.devicePointcheckCheckList];
                        item.devicePointcheckCheckList[0].isCheck = "1";
                        if (this.notUse) {
                            item.devicePointcheckCheckList[0].isNormal = 1;
                            item.devicePointcheckCheckList[0].defectAttachment = "";
                        }
                        // } else {
                        //   item.devicePointcheckCheckList = [];
                        // }
                        // item.devicePointcheckCheckList = [item.devicePointcheckCheckList];
                        // item.devicePointcheckCheckList = [];
                    } else {
                        item.devicePointcheckCheckList = [
                            item.devicePointcheckCheckList[
                            item.devicePointcheckCheckList.length - 1
                            ],
                        ];
                        item.devicePointcheckCheckList[0].isCheck = "1";
                    }
                    return item;
                });
            console.log("params", params);
            postAction(this.url.add, params).then((res) => {
                if (res.success) {
                    this.loadingSubmit = false
                    Notify({ type: "success", message: res.message });
                    setTimeout(() => {
                        window.location.reload();
                    }, 300);
                } else {
                    this.loadingSubmit = false
                    Notify({ type: "warning", message: res.message });
                }
                console.log(res);
            });
        },
        onSearch (val) {
            console.log(val, "val");
            this.getDevice(val);
        },
        getDevice (val) {
            if (!val) {
                return;
            }
            let params = {
                deviceCode: val,
            };
            getAction(this.url.queryByDeviceCode, params).then(async (res) => {
                console.log(res, "res");
                if (res.success) {
                    console.log(res);
                    //获取人员
                    await this.getpersonllist(res.result.id);
                    //获取流程
                    await this.getProcessNodeList();
                    //获取详情
                    this.getQueryById(res.result.id);
                    //获取全部数据
                    this.getdeviceDaySourceAll({ deviceId: res.result.id });
                    // this.getQueryById("1723995325948448769");
                    // this.DeviceData = res.result.records[0];
                } else {
                    this.DeviceData = {};
                    this.DeviceList = [];
                    Notify({ type: "warning", message: "未找到对应数据" });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.defect_class {
    margin-top: 15px;

    ::v-deep {
        .van-form {
            .van-field__error-message {
                display: none;
            }

            .van-cell {
                padding: 0;
            }

            .van-field__label {
                width: auto;
                margin-right: 0;
                font-size: 14px;
                color: #323233 !important;
            }

            .van-field__value {
                border: 1px solid #ccc;
                padding: 5px;
                box-sizing: border-box;
            }
        }
    }
}

.photo-swiper {
    position: relative;
    padding-top: 20px;

    .photo-close {
        width: 24px;
        height: 24px;
        background: #1e80ff;
        font-size: 24px;
        border-radius: 50%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 2px;
        z-index: 1;
        top: -9px;

        .van-icon {
            color: #fff;
            font-size: 20px;
        }
    }

    .imgclass {
        padding: 0 10px;

        .van-image {
            width: 100%;
        }
    }
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}

.app-container {
    height: 100%;
    width: 100%;
    overflow-x: hidden;

    .layout-content {
        background-color: #f5f5f5;
        min-height: 100%;

        .layout-header {
            padding-top: 20px;
            background-color: #fff;

            h5 {
                margin: 0;
                font-size: 18px;
                margin-left: 10px;
            }

            .van-row {
                .van-col {
                    text-align: center;

                    .van-icon {
                        margin-top: 10px;
                    }
                }
            }
        }

        .layout-main {
            .van-dialog__content {
                img {
                    width: 300px;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                }
            }

            .device_class {
                margin-top: 10px;
                background: #fff;
                padding: 15px;
                width: 100%;
                font-size: 14px;
                box-sizing: border-box;

                .van-button {
                    width: 120px;
                    height: 36px;
                    margin-top: 10px;
                }

                h5 {
                    margin: 0;
                    font-size: 16px;

                    span {
                        line-height: 16px;
                        font-size: 14px;
                        margin-left: 5px;
                        color: #1989fa;
                    }
                }
            }

            .van-cell {
                // border-bottom: 1px solid #ccc;
            }

            .van-button {
                width: 70%;
                border-radius: 5px;
            }
        }

        // .device_class {

        // }
    }
}
</style>
